import React, { useState, useEffect } from 'react';
import {
  tableConfig,
  tableDataSource,
  actions,
  tableDataSource2,
} from './config';
import _ from 'lodash';
import CommonTable from '@/common/CommonTable';
import { WOW } from 'wowjs';
import { ResizableBox } from 'react-resizable';

const TableTreeButton = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [rowSelect, setRowSelect] = useState([]);
  const [expandedRowKeys, setExpandedRowKeys] = useState([2]);

  useEffect(() => {
    const wow = new WOW({
      // 异步加载的数据是否有效
      // 类似于Echarts的机制
      // 如果想多次执行动画,可以多次wow创建
      // 之前的Echarts想要异步渲染,就是通过,获取到数据以后,再此进行Echarts的初始化,从而动态渲染数据
      live: false,
    });
    wow.init();
  }, []);

  const actionsOnClick = {
    allButton: () => allButton(),
    noAllButton: () => noAllButton(),
    fxButton: () => fxButton(),
  };
  const checkBoxSelection = (data) => {
    return _.map(data, (item, key) => {
      if (item.children) {
        return [...checkBoxSelection(item.children)];
      } else {
        return item.id;
      }
    });
  };
  const allButton = () => {
    setSelectedRowKeys(
      _.flatten(_.flatten(checkBoxSelection(tableDataSource)))
    );
  };
  const noAllButton = () => {
    setSelectedRowKeys([]);
  };
  const fxButton = () => {
    setSelectedRowKeys(
      _.difference(
        _.flatten(
          _.flatten(
            checkBoxSelection(
              rowSelect.length === 0 ? tableDataSource : rowSelect
            )
          )
        ),
        selectedRowKeys
      )
    );
  };
  const fatherRowRender = (data, row) => {
    const fahterRow = _.uniq(
      _.map(row, (item) => {
        return item.fatherId;
      })
    );
    return _.map(data, (item) => {
      if (item.id !== fahterRow[fahterRow.length - 1]) {
        return _.flatten(fatherRowRender(item.children, row));
      } else {
        return { ...item };
      }
    });
  };

  // 第一个表格属性
  const tableProps = {
    columns: _.map(tableConfig, (item, key) => {
      return { ...item, onHeaderCell: (columns) => ({ columns }) };
    }),
    dataSource: tableDataSource,
    rowKey: 'id',
    rowSelection: {
      // eslint-disable-next-line react/display-name
      renderCell: (text, record, index, Checkbox) => {
        if (record.noCheckbox) {
          return;
        }
        return Checkbox;
      },
      checkStrictly: false,
      onChange: (val, row) => {
        setSelectedRowKeys(val);

        let isSetRow = true;

        _.uniq(
          _.map(row, (item, key) => {
            if (!item.fatherId) {
              setRowSelect(tableDataSource);
              isSetRow = false;
            } else {
              if (key > 0 && _.indexOf(val, item.fatherId) === -1) {
                isSetRow = true;
              }
              if (isSetRow) {
                setRowSelect(_.flatten(fatherRowRender(tableDataSource, row)));
              }
            }
            return;
          })
        );
      },
      selectedRowKeys,
    },
    actions: _.map(actions, (item, key) => {
      const obj = { ...item };
      obj.onClick = actionsOnClick[item.id];
      return obj;
    }),
    className: 'wh-table-tree-button',
    bordered: true,
    components: {
      header: {
        // eslint-disable-next-line react/display-name
        cell: ({ columns }) => {
          return (
            <th>
              <ResizableBox
                width={200}
                height={10}
                // 调整的最小值
                // 数组中第一个单元是最小宽度,第二个是最小高度
                minConstraints={[200]}
                // 调整的最大值
                // 数组中第一个单元是最大宽度,第二个单元是最大高度
                maxConstraints={[300]}
              >
                <span>{columns && columns.title}</span>
              </ResizableBox>
            </th>
          );
        },
      },
    },

    expandable: {
      onExpandedRowsChange: (expandedRows) => {
        setExpandedRowKeys(expandedRows);
      },
      expandedRowKeys,
    },
  };

  // 第二个表格属性
  const tableProps2 = {
    columns: _.map(tableConfig, (item, key) => {
      const obj = { ...item };

      return obj;
    }),
    dataSource: tableDataSource2,
    rowKey: 'id',
    rowClassName: (record, index) => {
      // 取出这两个表格中相同的age来,存起来,假设叫ab
      // 判断当前的age是否在ab这个表格中
      // 如果在的话,给当前行设置一个class名,为 wh-table-tr-highlight
      // 如果不存在的话,也就不需要给当前行设置class名
      // 样式表的路径: src/style/component/tableTreeButton.less
      if (
        _.indexOf(
          _.intersection(
            _.map(tableDataSource, (item, key) => {
              return item.age;
            }),
            _.map(tableDataSource2, (item, key) => {
              return item.age;
            })
          ),
          record.age
        ) !== -1
      ) {
        return 'wh-table-tr-highlight';
      }
    },
    className: 'wh-table-highlight',
  };

  return (
    <div>
      {/* 第一个表格 */}
      <CommonTable {...tableProps} />
      {/* 第二个表格 */}
      <CommonTable {...tableProps2} />
    </div>
  );
};

export default TableTreeButton;
